<template>
	<view class="person-detail_bg">
		<uv-navbar title="个人详情" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIconSize="20px"
			leftIconColor="#313C56" :autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;">
			<template v-if='type == 2' v-slot:right>
				<view class="font-14 font-weight-regular" style="color: #313C56;" @click="edit">编辑</view>
			</template>
		</uv-navbar>
		<scroll-view :scroll-y="true" style="width: 100vw; margin-top: 10px;"
			:style="{ height: $uv.addUnit(scrollHeight) }">
			<view class="flex-row" style="margin-left: 20px; margin-right: 12px; margin-top: 2px;">
				<image :src="detail.headUrl" style="width: 48px; height: 48px; border-radius: 24px; min-width: 48px;">
				</image>
				<view class="flex-column" style="margin-left: 12px;">
					<view class="font-18 font-weight-medium flex-row" style="color: #313C56; ">
						{{ detail.nickname }}
						<view style="margin-left: 4px;">
							<image v-if="detail.bossLevel === 0" src="../../static/user/b0.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
							<image v-if="detail.bossLevel === 1" src="../../static/user/b1.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
							<image v-if="detail.bossLevel === 2" src="../../static/user/b2.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
							<image v-if="detail.bossLevel === 3" src="../../static/user/b3.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
							<image v-if="detail.bossLevel === 4" src="../../static/user/b4.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
							<image v-if="detail.bossLevel === 5" src="../../static/user/b5.png" style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;" mode="widthFix"></image>
						</view>
					</view>
					<view class="flex-row flex-wrap">
						<view v-for="(item,index) in list" :key="index" class="person-detail_label">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
			<view class="font-18 font-weight-medium" style="color: #313C56; margin-top: 8px; margin-left: 20px;">
				{{ detail.evaluateRatio }} %
				<text style="color: #6B7885;" class="font-12 font-weight-regular">好评率</text>
			</view>
			<view class="font-18 font-weight-medium" style="color: #313C56; margin-top: 8px; margin-left: 20px;">
				{{ detail.serviceNum }}
				<text style="color: #6B7885;" class="font-12 font-weight-regular">服务总数</text>
			</view>

			<view class="" style="margin: 12px; padding: 16px; border-radius: 12px; background-color: white;">
				<view class="flex-row flex-items-center">
					<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
					<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">个人简介</text>
				</view>
				<text class="font-14 font-weight-regular" style="color: #4F4F4F; margin-top: 8px;">
					{{ detail.introduction }}
				</text>
				<view class="flex-row flex-items-center" style="margin-top: 15px;">
					<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
					<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">技能特长</text>
				</view>
				<view class="flex-row flex-wrap" style="padding-top: 8px;">
					<view v-for="(item,index) in skills" :key="index" class="person-detail_label"
						style="color: #313C56; background-color: #F3F5FB;">
						{{ item.detail }}
					</view>
				</view>
				<view class="flex-row flex-items-center" style="margin-top: 11px;">
					<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
					<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">项目经历</text>
				</view>
				<view v-for="(item,index) in experiences" :key="index" class="person-detail_experience">
					<view class="flex-row flex-between">
						<text class="font-14 font-weight-medium" style="color: #313C56;">{{ item.name }}</text>
						<text class="font-12 font-weight-regular"
							style="color: #95A4B3; margin-top: 3px; white-space: nowrap;">{{ item.begin }} -
							{{ item.end }}</text>
					</view>
					<text class="font-12 font-weight-regular"
						style="color: #6B7885; margin-top: 5px;">{{ item.detail }}</text>
				</view>

			</view>
			<view class="" style="margin: 12px; padding: 16px; border-radius: 12px; background-color: white;">
				<view class="flex-row flex-items-center" style="margin-top: 0px;">
					<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
					<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">个人评价</text>
				</view>
				<view v-for="(item,index) in comments" :key="index" class="flex-column"
					style="border-radius: 12px; background-color: #F7F9FD; padding: 14px 16px 12px 16px; margin-top: 8px;">
					<view class="flex-row flex-items-center">
						<image :src="item.fromHead" style="width: 24px; height: 24px; border-radius: 12px;"></image>
						<view class="flex-column" style="margin-left: 4px;">
							<text class="font-12 font-weight-regular"
								style="color: #6B7885;">{{ item.fromNickname }}</text>
							<uv-rate :value="item.score" readonly size="12px" activeColor="#FFAA2A"
								gutter="2px"></uv-rate>
						</view>
					</view>
					<view class="font-12 font-weight-regular" style="color: #313C56; margin-top: 10px;">
						{{ item.detail }}
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-if='type == 1' class="person-detail_toolbar" :style="{height: $uv.addUnit(toolbarHeight)}">
			<view class="person-detail_toolbar__btn flex-row-center">
				邀请任务
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {
		getTeam,
		getUserInfo
	} from "../../api";
	export default {
		data() {
			return {
				detail: '',
				type: 0,
				skills: [],
				comments: [],
				experiences: [],
				userId: ''
			};
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				if (this.type == 1) {
					return this.pageHeight - this.toolbarHeight - 15
				} else {
					return this.pageHeight - 15
				}

			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
		/**
		 * @param {Object} info 
		 * info.type = 0 没有邀请和编辑
		 * info.type = 1 有邀请，没有编辑
		 * info.type = 2 没有邀请， 有编辑
		 */
		onLoad(info) {
			if (info.type) {
				this.type = parseInt(info.type)
			} else {
				this.type = 0
			}
			this.userId = info.userId
			this.getUserInfo(info.userId)
			console.error("userId = " + info.userId + ", sys = " + info.sys)
		},
		methods: {
			edit() {
				uni.navigateTo({
					url: `/pages/personal-homepage-edit/personal-homepage-edit?id=${this.userId}`,
					events: {
						update: () => {
							this.getUserInfo(this.userId)
						}
					}
				})
			},

			getUserInfo(id) {
				let params = {
					id: id
				}
				getUserInfo(params).then((data) => {
					this.detail = data
					console.error(this.detail)
					this.skills = data.skills
					this.experiences = data.experience
					this.comments = data.comments
				}).catch((e) => {})
			},

		}
	}
</script>

<style lang="scss">
	.person-detail_bg {
		background-image: url('../../static/person-detail-bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.person-detail_toolbar__btn {
		height: 44px;
		margin-left: 36px;
		margin-right: 36px;
		margin-top: 12px;
		background-color: #EB7520;
		border-radius: 8px;
		color: white;
		font-size: 16px;
		font-weight: 400;
	}

	.person-detail_toolbar {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100vw;
		background-color: white;
		font-size: 16px;
		font-weight: 400;
		border-top-color: #F3F5FB;
		border-top-width: 1px;
		border-top-style: solid;
	}

	.person-detail_experience {
		margin-top: 8px;
		border-radius: 12px;
		background-color: #F7F9FD;
		padding: 12px 16px;
		width: calc(100% - 32px);
		display: flex;
		flex-direction: column;
	}

	.person-detail_label {
		background-color: #FDEFE9;
		height: 18px;
		border-radius: 9px;
		padding-left: 8px;
		padding-right: 8px;
		display: flex;
		align-items: center;
		color: #EB7520;
		font-weight: 400;
		font-size: 12px;
		margin-right: 8px;
		margin-bottom: 4px;
	}
</style>